<template>
  <el-container v-loading="loading" class="table-container">
    <el-row class="toolbar" type="flex" justify="start" align="middle">
      <!-- <span class="select-label">项目名称:</span>
      <el-select v-model="project" placeholder="请选择项目">
        <el-option
        v-for="item in projectList"
        :key="item.projectId"
        :label="item.projectName"
        :value="item.projectId">
        </el-option>
      </el-select> -->
      <span class="select-label"></span>
      <!-- <el-select v-model="work" placeholder="请选择作业面" @change="getRecords">
        <el-option
          v-for="item in workList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select> -->
      <!-- <el-input placeholder="请输入内容"></el-input>
      <el-button type="primary">搜索</el-button> -->
      <div class="placeholder"></div>
      <el-button type="primary" @click="exportData('导出')"
        >导出数据</el-button
      >
      <el-button type="primary" @click="openDialog">上传导向数据</el-button>
    </el-row>
    <el-row class="table" type="flex" justify="start" align="top">
      <el-table :data="records.list" border style="width: 100%" height="700">
        <!-- <el-table-column fixed align="center" prop="projectId" label="项目编号">
        </el-table-column> -->
        <el-table-column
          width="200"
          align="center"
          prop="projectId"
          label="项目名称"
        >
          <template slot-scope="scope">
            <span>{{ getProjectName(scope.row.projectId) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="selectedSequence !== '导向'"
          align="center"
          prop="workName"
          label="作业名称"
        >
        </el-table-column>
        <el-table-column prop="date" align="center" label="采集时间">
        </el-table-column>
        <!-- <el-table-column
          prop="startTime"
          align="center"
          label="开始时间"
        >
        </el-table-column>
        <el-table-column
          prop="endTime"
          align="center"
          label="结束时间"
        >
        </el-table-column> -->
        <!-- <el-table-column
          prop="operator"2
          align="center"
          label="操作人"
        >
        </el-table-column> -->
        <el-table-column
          v-if="selectedSequence === '导向'"
          prop="CL"
          align="center"
          label="CL(m)"
        ></el-table-column>
        <el-table-column
          v-if="selectedSequence === '导向'"
          prop="MD"
          align="center"
          label="MD(m)"
        ></el-table-column>
        <el-table-column
          v-if="selectedSequence === '导向'"
          prop="Away"
          align="center"
          label="Away(m)"
        ></el-table-column>
        <el-table-column
          v-if="selectedSequence === '导向'"
          prop="HS"
          align="center"
          label="HS"
        ></el-table-column>
        <el-table-column
          v-if="selectedSequence === '导向'"
          prop="INC"
          align="center"
          label="INC"
        ></el-table-column>
        <el-table-column
          v-if="selectedSequence === '导向'"
          prop="AZ"
          align="center"
          label="AZ"
        ></el-table-column>
        <el-table-column
          v-if="selectedSequence === '导向'"
          prop="HT"
          align="center"
          label="HT"
        ></el-table-column>
        <el-table-column
          v-if="selectedSequence === '导向'"
          prop="Dip"
          align="center"
          label="Dip"
        ></el-table-column>
        <el-table-column
          v-if="selectedSequence === '导向'"
          prop="Elev"
          align="center"
          label="Elev"
        ></el-table-column>
        <el-table-column
          v-if="selectedSequence === '导向'"
          prop="Right"
          align="center"
          label="Right"
        ></el-table-column>
        <el-table-column
          v-if="selectedSequence !== '导向'"
          prop="deepLength"
          align="center"
          label="累计钻杆长度"
        ></el-table-column>
        <!-- <el-table-column
          prop="timeLength"
          align="center"
          label="扩孔时长(min)"
        >
        </el-table-column> -->
        <el-table-column
          v-if="selectedSequence !== '导向'"
          prop="runningForce"
          align="center"
          label="给进/起拔压力(KN)"
        >
        </el-table-column>
        <el-table-column
          v-if="selectedSequence !== '导向'"
          width="130"
          prop="rotateForce"
          align="center"
          label="旋转扭矩(KN·m)"
        >
        </el-table-column>
        <el-table-column
          v-if="selectedSequence !== '导向'"
          prop="landForce"
          align="center"
          label="泥浆泵压力(bar)"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="landForce"
          align="center"
          label="泥浆流量(m³/m)"
        >
        </el-table-column> -->
        <el-table-column
          v-if="selectedSequence !== '导向'"
          prop="rotateSpeed"
          align="center"
          label="动力头转速(R/min)"
        >
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="editRecord(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deleteData(scope.row._id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pager"
        layout="total, sizes, prev, pager, next, jumper, ->"
        :current-page="pageNo"
        :total="recordNum"
        :page-sizes="pageSizes"
        :page-size="currentPageSize"
        @size-change="handleSizeChange"
        @prev-click="onCurrentPageChange"
        @next-click="onCurrentPageChange"
        @current-change="onCurrentPageChange"
      ></el-pagination>
    </el-row>
    <upload-file
      :isShow="showUpload"
      @closeDialog="onCloseDialog"
    ></upload-file>
    <delete-data
      :isShow="showDelete"
      @closeDialog="onCloseDialog"
    ></delete-data>

    <!-- 更新数据 -->
    <el-dialog
      title="编辑"
      :visible="showEdit"
      :modal="false"
      @close="closeEditDialog"
    >
      <div v-if="selectedSequence !== '导向'">
        <el-form :model="updateRecord" label-width="120">
          <el-form-item prop="runningForce" label="给进/起拔压力(KN)">
            <el-input v-model="updateRecord.runningForce" />
          </el-form-item>
          <el-form-item prop="rotateForce" label="旋转扭矩(KN·m)">
            <el-input v-model="updateRecord.rotateForce" />
          </el-form-item>
          <el-form-item prop="landForce" label="泥浆泵压力(bar)">
            <el-input v-model="updateRecord.landForce" />
          </el-form-item>
          <el-form-item prop="rotateSpeed" label="动力头速度(R/min)">
            <el-input v-model="updateRecord.rotateSpeed" />
          </el-form-item>
        </el-form>
      </div>
      <div v-else>
        <el-form :model="updateLead" label-width="120">
          <el-form-item prop="CL" label="CL(m)">
            <el-input v-model="updateLead.CL" />
          </el-form-item>
          <el-form-item prop="MD" label="MD(m)">
            <el-input v-model="updateLead.MD" />
          </el-form-item>
          <el-form-item prop="Away" label="Away(m)">
            <el-input v-model="updateLead.Away" />
          </el-form-item>
          <el-form-item prop="HS" label="HS">
            <el-input v-model="updateLead.HS" />
          </el-form-item>
          <el-form-item prop="INC" label="INC">
            <el-input v-model="updateLead.INC" />
          </el-form-item>
          <el-form-item prop="AZ" label="AZ">
            <el-input v-model="updateLead.AZ" />
          </el-form-item>
          <el-form-item prop="HT" label="HT">
            <el-input v-model="updateLead.HT" />
          </el-form-item>
          <el-form-item prop="Dip" label="Dip">
            <el-input v-model="updateLead.Dip" />
          </el-form-item>
          <el-form-item prop="Elev" label="Elev">
            <el-input v-model="updateLead.Elev" />
          </el-form-item>
          <el-form-item prop="Right" label="Right">
            <el-input v-model="updateLead.Right" />
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button type="plain" @click="closeEditDialog">取消</el-button>
        <el-button type="primary" @click="update">确认修改</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>
<script>
// import { MessageBox, Notification } from 'element-ui'
// import { mock1 } from '@/assets/data/mock1'
import { request } from '@/utils/request'
import { mapState } from 'vuex'
import DeleteData from './DeleteData.vue'
import UploadFile from './UploadFile.vue'
export default {
  components: {
    UploadFile,
    DeleteData
  },
  data () {
    return {
      loading: false,
      showDelete: false,
      showUpload: false,
      showEdit: false,
      ratio: Number((window.outerWidth / 1920).toFixed(1)),
      activeTab: 0,
      project: '',
      work: '导向',
      pageSizes: [10, 20, 30, 50],
      currentPageSize: 10,
      pageNo: 1,
      tableData: [],

      // 更新信息
      updateLead: {
        AZ: 0,
        Away: 0,
        CL: 0,
        Dip: 0,
        Elev: 0,
        HS: 0,
        HT: 0,
        INC: 0,
        MD: 0,
        Right: 0
      },

      updateRecord: {
        runningForce: '',
        rotateForce: '',
        rotateSpeed: '',
        landForce: ''
      }
    }
  },

  computed: {
    ...mapState([
      'projectList',
      'selectedProjectId',
      'selectedSequence',
      'records'
    ]),
    recordNum () {
      return this.records.total
    }
  },

  watch: {
    selectedSequence (val) {
      if (this.selectedProjectId && val) {
        this.getRecords()
      }
    }
  },

  mounted () {
    this.getRecords()
  },

  methods: {
    openDialog () {
      this.showUpload = true
    },

    changeRouter (path, index) {
      this.activeTab = Number(index)
      this.$router.push(path)
    },

    editRecord (data) {
      this.showEdit = true
      if (this.selectedSequence === '导向') {
        for (const key in this.updateLead) {
          this.updateLead[key] = data[key]
        }
        this.updateLead._id = data._id
      } else {
        for (const key in this.updateRecord) {
          this.updateRecord[key] = data[key]
        }
        this.updateRecord._id = data._id
      }
    },

    closeEditDialog () {
      this.showEdit = false
    },

    // 更新数据
    update () {
      const data = {
        type: this.selectedSequence,
        record:
          this.selectedSequence === '导向'
            ? this.updateLead
            : this.updateRecord
      }
      this.$store.dispatch('updateRecord', data).then((res) => {
        if (res.success) {
          this.$message({
            type: 'success',
            message: '数据更新成功',
            showClose: true
          })
          this.closeEditDialog()
          this.getRecords()
        } else {
          this.$message({
            type: 'warning',
            message: '数据更新失败，请稍后重试',
            showClose: true
          })
        }
      })
    },

    async deleteData (id) {
      this.$alert('确认删除此项目信息？', '删除提示', {
        showCancelButton: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        callback: async (action) => {
          if (action === 'confirm') {
            const query = { id, workName: this.selectedSequence }
            const res = await request('/summary/delete', 'GET', query)
            if (res.success) {
              this.$message({
                type: 'success',
                message: '删除成功',
                showClose: true
              })
              this.getRecords()
            } else {
              this.$message({
                type: 'info',
                message: '删除失败, 请刷新重试',
                showClose: true
              })
            }
          }
        }
      })

      // this.$store.dispatch('deleteRecord', { id }).then(res => {
      //   console.log(res, 'res=====')
      //   if (res.success) {
      //     this.$message({
      //       type: 'success',
      //       message: '删除成功'
      //     })
      //   } else {
      //     this.$message({
      //       type: 'warning',
      //       message: '删除失败,请稍后重试'
      //     })
      //   }
      // })
      // this.showDelete = true
    },

    exportData () {
      const data = {
        projectId: this.selectedProjectId,
        workName: this.selectedSequence
      }
      this.$store.dispatch('downloadData', data).then(res => {
        console.log(res, 'res-----')
      })
      // MessageBox.confirm(`确认${type}数据？`, '提示', {
      //   confirmButtonText: `确定${type}`,
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   Notification({
      //     type: 'success',
      //     message: `数据${type}成功, 以保存至默认目录下!`
      //   })
      // }).catch(() => {
      //   Notification({
      //     type: 'info',
      //     message: '已取消'
      //   })
      // })
    },
    handleSizeChange (size) {
      this.currentPageSize = size
      // this.tableData = mock1.slice(0, size)
      this.getRecords()
    },

    onCurrentPageChange (index) {
      this.pageNo = index
      this.getRecords()
    },
    // getData (index) {
    //   const start = Number(index) > 1 ? Number(index) - 1 : 0
    //   const end = start * this.currentPageSize + this.currentPageSize
    //   this.tableData = mock1.slice(start * this.currentPageSize, end)
    // }
    getRecords (e) {
      const { selectedProjectId, selectedSequence } = this
      if (!selectedProjectId || !selectedSequence) {
        this.$message({
          type: 'warning',
          message: '请选择工程信息和作业信息',
          showClose: true
        })
        return
      }
      this.$store
        .dispatch('getRecords', {
          pageNo: this.pageNo,
          pageSize: this.currentPageSize,
          projectId: selectedProjectId,
          workName: selectedSequence
        })
        .then(() => {
          this.loading = false
        })
    },

    onCloseDialog (prop) {
      console.log(prop)
      this[`${prop}`] = false
    },

    // 获取工程名称
    getProjectName (projectId) {
      const project = this.projectList.find(
        (item) => item.projectId === projectId
      )
      return project ? project.projectName : ''
    }
  }
}
</script>
<style scoped>
.table-container {
  display: flex;
  flex-direction: column;
  padding: 0.9375rem;
  color: #000;
  height: 100%;
  font-size: 1rem;
}

.header {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  height: 2.5rem;
}

.date {
  line-height: 2.5rem;
  font-size: 2rem;
}

.tabs {
  display: flex;
}

.tab {
  margin-left: 0.9375rem;
  padding: 0 1.25rem;
  min-width: 6.25rem;
  height: 2.5rem;
  line-height: 2.5rem;
  border-radius: 0.375rem;
  border: 1px solid #1483f1;
}

.active {
  color: #f9f9f9;
  border: none;
  background-color: #1483f1;
}

.system-name {
  font-size: 2.25rem;
}

/* .toolbar {
  margin-top: 1.25rem;
} */

.select-label {
  min-width: 6.25rem;
}

.el-select {
  margin-right: 0.9375rem;
  width: 12.5rem;
}

.el-input {
  margin-right: 1rem;
  width: 18.75rem;
}

.placeholder {
  flex: 1;
}

.table {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 15px;
  width: 100%;
  /* height: 80%; */
  min-height: 25rem;
}

.pagination-row {
  margin-top: 0.9375rem;
  width: 100%;
  float: right;
}
</style>

<style>
.el-table {
  font-size: 1rem;
  overflow: auto;
}
</style>
